<!--
    登录
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.contentTitle
        div.switchover
          span(v-for="(item, index) in items" @click="login(item, index)" :class="index === isShow?'Yellow':''") {{item.title}}
      //  账号登录
      div(v-if="isShow == 0")
        div.loginTop
          div.xing
            p.p1 *
            p.p2 *
            p.p3 *
          el-form(ref="register").denglu
            el-form-item(label="用户名 :" label-position="right" label-width="90px" )
              el-input(type="text")
            el-form-item(label="密码 :" label-position="right" label-width="90px" )
              el-input(type="password")
            el-form-item(label="验证码 :" label-position="right" label-width="90px")
              el-input(type="text")
          div.hiht
            p.h1 请输入用户名、邮箱、微信号、QQ号
            p.h2 忘记密码?
            p.h3 点击切换
        div.clearfix
          div.remember.clearfix
            el-checkbox(v-model="checked") 记住密码
          router-link(:to="{name: 'PersonalCenter'}")
            div.button 登&nbsp;&nbsp;录
          div.footer
            div.zhuce
              router-link(v-bind:to="{name:'Register'}") 没有账号, 去
                span &nbsp;注册
          div.third
            span 第三方登录
          div.QQweixin
            div.QQ
              img(src="/static/ToLogin/u457.png")
            div.weixin
              img(src="/static/ToLogin/u458.png")
      //  手机登录
      div(v-if="isShow == 1")
        div.loginTop1
          div.xing
            p.p1 *
            p.p2 *
          el-form(ref="register").denglu
            el-form-item(label="手机号 :" label-position="right" label-width="90px")
              el-input(type="text")
            el-form-item(label="验证码 :" label-position="right" label-width="90px")
              el-input(type="text")
          div.hiht
            p.y1 获取验证码
        div.clearfix
          div.button 登&nbsp;&nbsp;录
          div.footer
            div.zhuce
              router-link(v-bind:to="{name:'Register'}") 没有账号, 去
                span &nbsp;注册
          div.third
            span 第三方登录
          div.QQweixin
            div.QQ
              img(src="/static/ToLogin/u457.png")
            div.weixin
              img(src="/static/ToLogin/u458.png")
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {title: '账号登录'},
          {title: '手机登录'}
        ],
        isShow: 0,
        checked: false
      }
    },
    mounted() {
      console.log(this.isShow)
    },
    methods: {
      login(item, index) {
        this.isShow = index
      },
      register() {
        this.isShow = 'on'
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 0 auto

  .contentTitle
    width 100%
    height 70px

  .content
    width 100%
    height 330px

  .switchover
    width 320px
    height 35px
    margin 66px 0 66px 476px
    span
      font-size 24px
      font-weight 700
      margin-right 70px
      cursor pointer

  .loginTop
    width 1200px
    margin 0 auto
    height 243px

  .loginTop1
    width 1200px
    margin 0 auto
    height 143px

  .xing
    height 240px
    margin-left 263px
    margin-right 20px
    float left
    .p1
      height 70px
      line-height 50px
      color red
    .p2
      height 70px
      line-height 65px
      color red
    .p3
      height 70px
      line-height 87px
      color red

  .denglu
    width 425px
    float left

  .hiht
    width 310px
    float left
    margin-left 25px
    p
      font-size 18px
      color #0C7C2A
    .h1
      height 44px
      line-height 44px
    .h2
      height 120px
      line-height 120px
    .h3
      height 44px
      line-height 44px
    .y1
      width 160px
      height 50px
      line-height 50px
      background-color #FF9933
      color #fff
      text-align center
      border-radius 5px
      font-weight 700
      margin-top 78px

  .remember
    width 100px
    height 35px
    line-height 35px
    margin-left 380px
    position relative

  .button
    width 350px
    height 50px
    line-height 50px
    text-align center
    border-radius 5px
    background-color #FF9933
    color #fff
    margin 32px auto 10px auto
    font-weight 700
    font-size 18px
    cursor pointer

  .footer
    width 524px
    margin 0 auto
    .zhuce
      margin-left 320px
      a
        color #999
      span
        color #0C7C2A
        text-decoration underline

  .third
    width 524px
    height 1px
    background-color #999
    margin 70px auto
    position relative
    span
      position absolute
      width 120px
      background-color #fff
      z-index 2
      text-align center
      font-size 18px
      top -8px
      left 50%
      margin-left -50px

  .QQweixin
    width 135px
    height 124px
    margin 20px auto
    img
      width 100%
      height 100%
    .QQ
      display inline-block
      width 50px
      height 50px
      margin-right 35px
    .weixin
      display inline-block
      width 50px
      height 50px

  .Yellow
    color #FF9933

</style>
<style lang="stylus" rel="stylesheet/stylus">
  .denglu
    .el-input__inner
      border-radius 0
      height 44px
    .el-form-item__label
      font-size 18px
    .el-form-item
      margin-bottom 37px
</style>
